<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Devices</title>
        <script src="{{ url_for('static', filename='jquery-1.10.2.js') }}"></script>

    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='control_style.css') }}"/>
</head>
<body>
<div id="" class="left full-height">
    <!-- logo -->
    <div id="" class="logo-bar">
        <div id="" class="ele full-height">
            <h1 style="color: #ededed;">LOGO</h1>
        </div>

    </div>
    <!-- tabs -->
    <div id="" class="tab-bar">
        <div style="height: 50px;width: 100%"></div>
        <a href="/devices">
            <div id="" class="tab-content no-choix">
                DEVICES
            </div>
        </a>
        <a href="/types">
            <div id="" class="tab-content no-choix">
                TYPE
            </div>
        </a>
        <a href="/conn">
            <div id="" class="tab-content no-choix">
                CONNECTIONS
            </div>
        </a>
        <a href="/log">
            <div id="" class="tab-content no-choix">
                LOG
            </div>
        </a>
        <a href="/groups">
            <div id="" class="tab-content choix">
                GROUPS
            </div>
        </a>
    </div>
</div>

<div id="" class="right full-height">
    <!-- admin -->
    <div id="" class="admin-bar">

    </div>
    <!-- main content -->
    <div id="" class="content-background">
        <div class="content-box">
            <div class="data-box" style="padding-left: 30px">
                <div id="groups-function">hello</div>
            </div>

        </div>

    </div>
</div>
</body>
<script>
    function jump(url) {
        window.location.href = url;
    }

    function create_xhr() {
        let XHR = [  //兼容不同浏览器和版本得创建函数数组
            function () {
                return new XMLHttpRequest()
            },
            function () {
                return new ActiveXObject("Msxml2.XMLHTTP")
            },
            function () {
                return new ActiveXObject("Msxml3.XMLHTTP")
            },
            function () {
                return new ActiveXObject("Microsoft.XMLHTTP")
            }
        ];
        let xhr = null;
        //尝试调用函数，如果成功则返回XMLHttpRequest对象，否则继续尝试
        for (let i = 0; i < XHR.length; i++) {
            try {
                xhr = XHR[i]();
            } catch (e) {
                continue  //如果发生异常，则继续下一个函数调用
            }
            break;  //如果成功，则中止循环
        }
        return xhr;  //返回对象实例
    }


    var groups_function = document.getElementById('groups-function')
    add_group()


    function add_group() {
        groups_function.innerHTML = "<h2>ADD</h2>\n" +
            "<from name=\"group_modify\">" +
            "        <p>name:<input type=\"text\" id=\"modify-group-name\" style=\"width:250px\" name = \"group_name\"></p>\n" +
            "        <p>device:\n" +
            "            {% for device in devices %}\n"+
                "           <input type=\"checkbox\"  name=\"group_device\" value=\"{{ device[0] }}\">{{ device[1] }}</input>\n"
                +
                "        {% endfor %}\n" +
            "            </p>\n" +
            "        <button onclick=\"confirm_add_group()\">submit</button>" +
            "</from>"
    }

    function confirm_add_group() {
        let group_name = document.getElementById("modify-group-name").value;
        {#alert(group_id + "," + group_name)#}
        let group_devices_list = [];
        let group_devices = document.getElementsByName("group_device");
        for (let i = 0; i < group_devices.length; i++) {
            if (group_devices[i].checked) {
                group_devices_list.push(group_devices[i].value)
            }
        }
        {#alert(group_devices_list.toString());#}
        let add_group_data = {};
        add_group_data["group_name"] = group_name;
        add_group_data["group_devices_list"] = group_devices_list.toString();

        $.ajax({
            type: "POST",
            url: "/equipmentGroup/addEquipmentGroup",
            'data': JSON.stringify(add_group_data),
            'contentType': 'application/json',
            success: function (data) {
                console.log(data);
                {#location.reload();#}
                jump('/groups')
            }
        });
    }
</script>
</html>